<template>
  <el-tabs v-model="tab" class="tast-detail-tabs">
    <el-tab-pane :label="$t('historyDiagnosis.taskInfo.result')" :name="1">
      <div>
        <div class="info-title">
          <svg-icon name="note" class="icon" />
          <div class="title">{{ $t('datasource.taskInfo') }}</div>
        </div>
        <p class="s-i-base-item">
          {{ $t('app.cluterTitle')
          }}<span>
            {{ taskData.pointData.nodeVOSub.clusterId }}/{{
              taskData.pointData.nodeVOSub.clusterNodes[0].azName
                ? taskData.pointData.nodeVOSub.clusterNodes[0].azName + '_'
                : ''
            }}{{ taskData.pointData.nodeVOSub.clusterNodes[0].publicIp }}:{{
              taskData.pointData.nodeVOSub.clusterNodes[0].dbPort
            }}({{ taskData.pointData.nodeVOSub.clusterNodes[0].clusterRole }})
          </span>
        </p>

        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.taskName') }}<span>{{ taskData.pointData.taskName }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.dbName') }}<span>{{ taskData.pointData.dbName }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.schemaName') }}<span>{{ taskData.pointData.schemaName }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.sqlId') }}<span>{{ taskData.pointData.sqlId }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.taskType') }}<span>{{ taskData.pointData.taskType }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.taskState') }}<span>{{ taskData.pointData.state }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.taskStartTime')
          }}<span>{{ moment(taskData.pointData.taskStartTime).format('MM-DD HH:mm:ss') }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.taskEndTime')
          }}<span>{{ moment(taskData.pointData.taskEndTime).format('MM-DD HH:mm:ss') }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.cost') }}<span>{{ taskData.pointData.cost }}</span>
        </p>
        <p class="s-i-base-item">
          {{ $t('historyDiagnosis.taskInfo.createTime')
          }}<span>{{ moment(taskData.pointData.createTime).format('MM-DD HH:mm:ss') }}</span>
        </p>

        <div class="info-title" style="margin-top: 16px; margin-bottom: 8px">
          <svg-icon name="note" class="detail-icon" />
          <div class="title">{{ $t('historyDiagnosis.taskInfo.option') }}</div>
        </div>
        <div>
          <el-checkbox-group>
            <el-checkbox
              v-for="item in taskData.pointData.configs"
              :key="item.option"
              :label="item.name"
              :checked="item.isCheck"
            />
          </el-checkbox-group>
        </div>

        <div class="info-title" style="margin-top: 16px; margin-bottom: 8px">
          <svg-icon name="cmd" class="detail-icon" />
          <div class="title">SQL</div>
        </div>
        <el-input v-model="taskData.pointData.sql" :rows="4" type="textarea" :input-style="'fontSize:14px'" />

        <div class="info-title" style="margin-top: 16px; margin-bottom: 8px">
          <svg-icon name="cmd" class="detail-icon" />
          <div class="title">{{ $t('datasource.taskInfoRemarkKey') }}</div>
        </div>
        <el-input v-model="taskData.pointData.remarks" :rows="8" type="textarea" :input-style="'fontSize:14px'" />
      </div>
    </el-tab-pane>
    <el-tab-pane :label="$t('historyDiagnosis.taskInfo.thresholdsRemark')">
      <el-table
          :table-layout="'auto'"
          :data="taskData.pointData.thresholds"
          :span-method="objectSpanMethod"
          style="width: 100%"
          :border="true"
          :header-cell-class-name="
              () => {
                  return 'grid-header'
              }
          "
      >
          <el-table-column prop="thresholdType" :label="$t('historyDiagnosis.kind')" width="180" />
          <el-table-column prop="thresholdName" :label="$t('historyDiagnosis.thresholdsName')" width="180" />
          <el-table-column prop="thresholdValue" :label="$t('historyDiagnosis.thresholdsConfig')" width="180">
              <template #default="scope">
                  {{ scope.row.thresholdValue }}{{ scope.row.thresholdUnit ? scope.row.thresholdUnit : '' }}
              </template>
          </el-table-column>
          <el-table-column prop="thresholdName" :label="$t('historyDiagnosis.thresholdsRemark')" />
      </el-table>
  </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { getPointData } from '@/api/historyDiagnosis'
import { useRequest } from 'vue-request'
import moment from 'moment'
import type { TableColumnCtx } from 'element-plus'

const props = withDefaults(
  defineProps<{
    nodesType: string
    taskId: string
  }>(),
  {
    nodesType: '',
    taskId: '',
  }
)

const tab = ref(1)
const typeId = ref('TASKINFO')
const taskData = ref<{
  pointData: {
    configs: Array<any>
    thresholds: Array<any>
    state: string
    remarks: string
    cost: string
    createTime: string
    hisDataEndTime: string
    hisDataStartTime: string
    taskName: string
    dbName: string
    schemaName: string
    sqlId: string
    taskType: string
    taskStartTime: string
    taskEndTime: string
    sql: string
    nodeVOSub: {
      clusterId: String
      clusterNodes: Array<any>
    }
  }
}>({
  pointData: {
    createTime: '',
    state: '',
    remarks: '',
    cost: '',
    hisDataEndTime: '',
    hisDataStartTime: '',
    taskName: '',
    dbName: '',
    sqlId: '',
    taskType: '',
    taskStartTime: '',
    taskEndTime: '',
    sql: '',
    configs: [],
    thresholds: [],
    nodeVOSub: {
      clusterId: '',
      clusterNodes: [{}],
    },
  },
})
watch(
  () => props.nodesType,
  (val: string) => {
    typeId.value = val
    requestData()
  }
)

interface SpanMethodProps {
    row: any
    column: TableColumnCtx<any>
    rowIndex: number
    columnIndex: number
}
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
    if (columnIndex === 0) {
        let span = culRowspan(rowIndex)
        return {
            rowspan: span,
            colspan: span > 0 ? 1 : 0,
        }
    }
}
const culRowspan = (rowIndex: number) => {
    let count = 0
    if (taskData.value.pointData.thresholds.length === 0) return 0
    if (
        rowIndex === 0 ||
        taskData.value.pointData.thresholds[rowIndex].thresholdType !==
            taskData.value.pointData.thresholds[rowIndex - 1].thresholdType
    ) {
        count = 1
        for (let index = rowIndex + 1; index < taskData.value.pointData.thresholds.length; index++) {
            const element = taskData.value.pointData.thresholds[index]
            if (element.thresholdType === taskData.value.pointData.thresholds[rowIndex].thresholdType) count++
            else break
        }
    }
    return count
}

onMounted(() => {
  typeId.value = props.nodesType
  requestData()
  const wujie = window.$wujie
  if (wujie) {
    wujie?.bus.$on('opengauss-locale-change', (val: string) => {
      nextTick(() => {
        requestData()
      })
    })
  }
})

const { data: res, run: requestData } = useRequest(
  () => {
    return getPointData(props.taskId, props.nodesType, 'sql')
  },
  { manual: true }
)

watch(res, (res: any) => {
  console.log('DEBUG: RES', res)
  taskData.value = res
  taskData.value.pointData.remarks = taskData.value.pointData.remarks.replaceAll('<br/>', '\r\n')
})
</script>

<style lang="scss" scoped>
@use '@/assets/style/task.scss' as *;
</style>
